<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import {
  NSpace,
  cardProps,
  type FormInst,
  NForm,
  NFormItem,
  NInput,
  useMessage,
  NRadioGroup,
  NRadio
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
const props = defineProps({
  ...cardProps,
  value: {
    type: Object,
    required: true
  },
  leaderId: {
    type: Number
  }
})
const emit = defineEmits<{
  (event: 'close'): void
  (event: 'update'): void
}>()

const message = useMessage()

//去除空格
const stopNull = (value: string) => {
  return !value.startsWith(' ') && !value.endsWith(' ')
}


const formRef = ref<FormInst | null>(null)
const form = reactive({
  modal: props.value.modal, //模式，
  am: props.value.workPlan ? (props.value.workPlan?.indexOf('下午') != -1 ? props.value.workPlan?.split('下午:')[0].slice(3) : '') : '', //上午
  pm: props.value.workPlan ? (props.value.workPlan?.indexOf('下午') != -1 ? props.value.workPlan?.split('下午:')[1] : '') : '',//下午
  all: props.value.workPlan ? (props.value.workPlan.indexOf('下午') != -1 ? '' : props.value.workPlan) : ''
})
const rules = {
  am: {
    required: false,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (value.length > 300) return new Error('上午工作安排不得超过300字')
      return true
    }
  },
  pm: {
    required: false,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (value.length > 300) return new Error('下午工作安排不得超过300字')
      return true
    }
  },
  all: {
    required: false,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (value.length > 600) return new Error('全天工作安排不得超过600字')
      return true
    }
  },
}

const loading = ref(false)
const submit = () => {
  formRef.value?.validate(async (err) => {
    if (err) return
    loading.value = true
    const { workTime } = props.value
    const timeType = form.modal
    const [error, res] = await sendRequest({
      module: 'selfDesktop',
      api: 'leadSave',
      override: {
        data: {
          leaderId: props.leaderId,
          list: [
            {
              timeType: 0,
              remarks: timeType === 0 ? form.all : null,
              workTime: workTime
            },
            {
              timeType: 1,
              remarks: timeType === 1 ? form.am : null,
              workTime: workTime
            },
            {
              timeType: 2,
              remarks: timeType === 1 ? form.pm : null,
              workTime: workTime
            }
          ]
        }
      }
    })
    loading.value = false

    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    message.success(res.msg)
    emit('update')
    emit('close')
  })
}
</script>

<template>
  <VDialogContent @submit="submit" @close="emit('close')" :title="props.value.workPlan ? '编辑工作安排' : '新增工作安排'">
    <NForm :model="form" ref="formRef" label-placement="left" label-width="80" size="small" :rules="rules"
      style="min-width: 500px; height: auto" require-mark-placement="left">
      <NSpace>
        <NFormItem label="日志模式" path="modal">
          <NRadioGroup v-model:value="form.modal">
            <NRadio :value="1" label="上下午模式" />
            <NRadio :value="0" label="全天模式" />
          </NRadioGroup>
        </NFormItem>
      </NSpace>
      <NFormItem label="上午" v-show="form.modal == 1" path="am">
        <NInput v-model:value="form.am" type="textarea" rows="4" :allow-input="stopNull" />
      </NFormItem>
      <NFormItem label="下午" v-show="form.modal == 1" path="pm">
        <NInput v-model:value="form.pm" type="textarea" rows="4" :allow-input="stopNull" />
      </NFormItem>
      <NFormItem label="全天" v-show="form.modal === 0" path="all">
        <NInput v-model:value="form.all" type="textarea" rows="7" :allow-input="stopNull" />
      </NFormItem>
    </NForm>
  </VDialogContent>
</template>
